<template>
    <div class="community-container">
      <!-- 顶部内容 -->
      <div class="header">
        <h1>社区广场</h1>
        <p>发现有趣的话题，与志同道合的用户交流</p>
      </div>
  
      <!-- 主内容区域 -->
      <router-view class="content-area" />
  
      <!-- 底部导航栏 -->
      <el-menu
        :default-active="$route.path"
        mode="horizontal"
        class="bottom-nav"
        @select="handleNavSelect"
      >
        <el-menu-item index="/">
          <i class="iconfont icon-shop"></i>
          <span>商城</span>
        </el-menu-item>
        <el-menu-item index="/edu">
          <i class="iconfont icon-edu"></i>
          <span>农教</span>
        </el-menu-item>
        <el-menu-item index="/community">
          <i class="iconfont icon-community"></i>
          <span>社区</span>
        </el-menu-item>
      </el-menu>
  
      <!-- 新增侧边菜单按钮 -->
      <el-button
        type="primary"
        icon="el-icon-menu"
        class="menu-trigger"
        @click="drawerVisible = true"
      ></el-button>
  
      <!-- 左侧抽屉菜单 -->
      <el-drawer
        v-model="drawerVisible"
        :with-header="false"
        :size="240"
        :before-close="handleClose"
      >
        <el-menu
          :default-active="$route.path"
          mode="vertical"
          @select="handleMenuSelect"
        >
          <el-menu-item index="/community/topics">
            <i class="iconfont icon-topic"></i>
            <span>话题列表</span>
          </el-menu-item>
          <el-menu-item index="/community/experts">
            <i class="iconfont icon-expert"></i>
            <span>专家库</span>
          </el-menu-item>
          <el-menu-item index="/community/ai">
            <i class="iconfont icon-ai"></i>
            <span>AI助手</span>
          </el-menu-item>
        </el-menu>
      </el-drawer>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  const drawerVisible = ref(false) // 控制抽屉显示状态

// 处理菜单项点击事件
const handleMenuSelect = (key: string) => {
  router.push(key).catch(err => {
    if (!err.message.includes('Avoided redundant navigation')) throw err
  })
  drawerVisible.value = false // 关闭抽屉
}

// 处理抽屉关闭事件
const handleClose = () => {
  drawerVisible.value = false
}

  const handleNavSelect = (key: string) => {
    if (key === '/') {
      router.replace({ path: '/' })
    } else {
      router.push(key)
    }
  }
  </script>

  <style scoped>
  .community-container {
    min-height: 100vh;
  }
  .menu-trigger {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1001;
  }
  
  .el-drawer {
    background: #f5f7fa;
  }
  
  .el-menu-item {
    display: flex;
    align-items: center;
    padding: 0 20px !important;
  }
  
  .el-menu-item i {
    font-size: 24px;
    margin-right: 10px;
    color: #666;
  }
  
  .el-menu-item span {
    font-size: 14px;
    color: #333;
  }
  
  .el-menu-item.is-active {
    background: #ecf5ff;
    border-right: 4px solid #409EFF;
  }
  
  .el-menu-item:hover {
    background: #f5f7fa;
  }
  </style>
  <!-- <style scoped>
  .community-container {
    min-height: 100vh;
  }
  
  .header {
    padding: 40px 20px;
    text-align: center;
    background: #f5f7fa;
    border-bottom: 1px solid #eee;
  }
  
  .content-area {
    padding: 20px;
    margin-bottom: 80px; /* 为导航留出空间 */
  }
  
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  }
  
  .el-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 80px !important;
    transition: transform 0.3s;
  }
  
  .el-menu-item:hover {
    transform: translateY(-5px);
  }
  
  .el-menu-item i {
    font-size: 28px;
    margin-bottom: 6px;
    color: #666;
  }
  
  .el-menu-item span {
    font-size: 12px;
    color: #666;
  }
  
  /* 当前选中状态 */
  .el-menu-item.is-active {
    border-bottom: 4px solid #409EFF;
  }
  
  .el-menu-item.is-active i {
    color: #409EFF !important;
  }
  
  .el-menu-item.is-active span {
    color: #409EFF !important;
  }
  
  @media (max-width: 768px) {
    .bottom-nav {
      height: 60px !important;
    }
    
    .el-menu-item {
      height: 60px !important;
    }
    
    .el-menu-item i {
      font-size: 24px;
    }
    
    .el-menu-item span {
      font-size: 10px;
    }
  }
  </style> -->